TitleTag 标题标签 v1.1.5

这是一个可以放在标题旁边的一个内联组件。

基础用法

跟随主题色变换

Vitepress primary 类型Vitepress info 类型Vitepress succuss 类型Vitepress danger 类型Vitepress important 类型

ElementPlus primary 类型ElementPlus info 类型ElementPlus succuss 类型ElementPlus danger 类型

large sizedefault sizesmall sizemini size

left position，添加样式 margin-right: 4pxright position，添加样式 margin-left: 4px

<script setup lang="ts">
import { TkTitleTag } from "vitepress-theme-teek";
</script>

<template>
  <div class="tk-space">
    <TkTitleTag text="跟随主题色变换" />

    <div class="tk-space">
      <TkTitleTag text="Vitepress primary 类型" type="vp-primary" />
      <TkTitleTag text="Vitepress info 类型" type="vp-info" />
      <TkTitleTag text="Vitepress succuss 类型" type="vp-success" />
      <TkTitleTag text="Vitepress danger 类型" type="vp-danger" />
      <TkTitleTag text="Vitepress important 类型" type="vp-important" />
    </div>

    <div class="tk-space">
      <TkTitleTag text="ElementPlus primary 类型" type="ep-primary" />
      <TkTitleTag text="ElementPlus info 类型" type="ep-info" />
      <TkTitleTag text="ElementPlus succuss 类型" type="ep-success" />
      <TkTitleTag text="ElementPlus danger 类型" type="vp-danger" />
    </div>

    <div class="tk-space">
      <TkTitleTag text="large size" size="large" />
      <TkTitleTag text="default size" />
      <TkTitleTag text="small size" size="small" />
      <TkTitleTag text="mini size" size="mini" />
    </div>

    <div class="tk-space">
      <TkTitleTag text="left position，添加样式 margin-right: 4px" position="left" />
      <TkTitleTag text="right position，添加样式 margin-left: 4px" position="right" />
    </div>
  </div>
</template>

<style scoped>
.tk-space {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
</style>

隐藏源代码

API

属性

属性名	说明	类型	默认值
text	文本	string	—
type	类型	Type	—
position	位置	left / right	''
size	大小	large / default / small / mini	default

Type 类型为：

• vp-primary
• vp-info
• vp-success
• vp-warning
• vp-danger
• vp-important
• ep-primary
• ep-info
• ep-success
• ep-warning
• ep-danger

position 配置项告诉组件位于文本的哪个位置，当为 left 时，添加 margin-right: 4px; 样式，当为 right 时，添加 margin-left: 4px; 样式。

插槽

插槽名	说明
default	文本，覆盖 props 传来的 text